<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件和文件夹上传</title>
</head>
<body>
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
    <label for="fileInput">选择文件和文件夹：</label><br>
    <input type="file" id="fileInput" name="files[]" multiple webkitdirectory>
    <br>
    <button type="submit">上传</button>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('uploadForm');
        const fileInput = document.getElementById('fileInput');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止默认表单提交行为

            const formData = new FormData();
            const files = fileInput.files;

            for (let i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }

            // 可以使用 fetch API 或者 XMLHttpRequest 发送 FormData 到服务器
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (response.ok) {
                        console.log('文件上传成功！');
                        // 这里可以处理上传成功后的逻辑
                    } else {
                        console.error('文件上传失败！');
                        // 这里可以处理上传失败后的逻辑
                    }
                })
                .catch(error => {
                    console.error('发生错误：', error);
                    // 这里可以处理发生错误后的逻辑
                });
        });
    });
</script>
</body>
</html>
